<template>
<view class="container page">
	<view class="goodItem">
		<view class="items" v-for="(item,index) in goods" :key='index' >
			<view class="goodImage" @click="gotoItemDetail(item.saleId,index,item.goodsId)">
				<image :src="item.picUrl | dominaImg" mode="aspectFill"></image>
				<image v-if="type == '2'&& item.izStock == 0" src="../../static/market_product_none.png" mode="widthFix" class="proNone"></image>
			</view>
			<view class="contentGroud">
				<view class="totle ellipsis--1"><text v-if="type == '1'&& item.izRequired == 1" class="shopType">{{msgDict.must}}</text> {{item.title}}</view>
				
				<view class="justify">
					<view class="moneyG">
						<block v-if="msgDict.must == '必选'">
							<view class="shopLimit" v-if="type == '1'&& item.izRequired == 1">限{{item.maxNum}}套</view>
						</block>
						<block v-else>
							<view class="shopLimit" v-if="type == '1'&& item.izRequired == 1">Limited {{item.maxNum}}set</view>
						</block>
						<view class="itemMoney">￥<text>{{item.price}}</text></view>
					</view>
					<view class="itemSales" @click.stop ="btnSpecifications(index)">{{msgDict.size}}
						 <view v-if="item.showNum >0" class="seleNum">{{item.showNum}}</view>
					</view>
				</view>	
			</view>
		</view>
	</view>
<view class="jiesuan-box" :style="'z-index:'+zIndex+';'">
	<view class="left-price">
		<view class="all_select_box" :class="shoppingCartAnimation? 'shoppingCartAnimations' : '' "  @click="btnOpencartClick">
		  <uni-icons type="cart-filled" color="#fff" size="25"></uni-icons>
		  
		  <view v-if="orderNum >0" class="seleNum">{{orderNum}}</view>
		</view>
		<view class="total">
			<block v-if="msgDict.must == '必选'"><view>已选择{{orderNum}}件产品</view></block>
			<block v-else>select {{orderNum}}</block>
			<view >¥<text>{{ showPrice }}</text></view>
		</view>
	</view>
	<view class="to-pay-btn" @tap="toPayOrder">
		{{msgDict.submit}}
	</view>
</view>
<!-- 内容 -->
<view class="animatFlex">
	<!-- 小球动画 -->
	<view :animation="animationY" :style="'position:fixed;top:' + ballY + 'px;'" v-if="showBall">
		<view class="ball" :animation="animationX" :style="'position:fixed;left:' + ballX + 'px;'"></view>
	</view>
</view>
<!-- 规格弹出窗 -->
<uni-popup ref="popupAddCart" type="center" :maskClick="false">
	<view class="popupAddCartCon">
		<view class="titleG">
			<view class="title">
				<view class="labIzRequired" v-if="skuList.izRequired ==1">{{msgDict.must}}</view>
				<view class="labTitle">{{skuList.popTitle}}</view>
			</view>
			<uni-icons type="closeempty" size="25" color="#ccc" @click="btnPopCloseClick"></uni-icons>
		</view>
		<view class="selectSku" v-if="type == '2'">
			{{msgDict.size}}：<text v-if="skuList.selIndex == -1">{{msgDict.noSize}}</text><text v-else>{{skuList.selItem}} 库存：{{skuList.selStock}}</text>
		</view>
		<block v-if="msgDict.must == '必选'">
			<view class="needLab" v-if="skuList.izRequired ==1">限{{skuList.maxNum}}套</view>
		</block>
		<block v-else>
			<view class="needLab" v-if="skuList.izRequired ==1">Limited {{skuList.maxNum}}set</view>
		</block>
		<view class="selefctList">
			<view class="selectTitle">{{msgDict.size}}：</view>
			<view class="selectItems">
				<view class="keyItem" v-for="(item,index) in skuList.data" :key="index"  :class="type == '2'&&item.izStock == 0?'keyItemZero':skuList.selIndex == index?'keyItemActive':''" 
				 @click="btnSizeClick(item,index)">
					{{item.value}}
				</view>
			</view>
		</view>
		
		<view class="buy-num">
			<view class="buy-num-title">
				￥<text>{{skuList.totalPrice}}</text>
				<view class="selSku" v-if="type == '1'&&skuList.selIndex >-1">
					{{msgDict.size}}：({{skuList.selItem}})
				</view>
			</view>
			<numbox v-if="skuList.selNum > 0" :title="skuList.selNum" @clickLeft="btnNumboxDetClick" @clickRight="btnNumboxAddClick"></numbox>
			<view v-else class="btnAdd" @click="btnAddCartClick($event)">{{msgDict.AddCart}}</view>
		</view>
	</view>
</uni-popup>
<!-- 购物车列表 -->
<uni-popup ref="popup" type="bottom" @change='btnCartChangeClick'>
	<view class="popupContent">
		<view class="titleG">
			<view class="popCheck" @click="btnChangeCheckbox()">
				<uni-icons :type="allSelCheak?'checkbox-filled':'checkbox'" :color="allSelCheak?'#5360FF':'#ccc'" size="20"></uni-icons>
				<view class="classCheak">{{msgDict.all}}</view>
			</view>
			<view class="popDelete" @click='colsePopup'>
				<uni-icons type="trash" color="#BEBEBE" size="15" ></uni-icons>{{msgDict.delete}}
			</view>
		</view>
		<scroll-view class="coupons" scroll-y="true" :style="'max-height: '+maxHight+'px;'">
			<view class="vailable" v-for="(item, index) in cartList" :key="index">
				<view class="goodsItem">
					<view class="check" @tap.stop="btnselectedClick(index,item.isChecked)">
						<uni-icons :type="item.isChecked?'checkbox-filled':'checkbox'" :color="item.isChecked?'#5360FF':'#ccc'" size="20"></uni-icons>
					</view>
					<view class="goodsInfo">
						<view class="img-box">
							<image mode="aspectFill" :src="item.pic" class="img" />
							
							<block v-if="msgDict.must == '必选'">
								<view class="backView" v-if="item.izWarning == '1'">仅剩{{item.stock}}件</view>
							</block>
							<block>
								<view class="backView" v-if="item.izWarning == '1'">Limited {{item.stock}}set</view>
							</block>
						</view>
						<view class="text-box">
							<view class="goods-title">
								<view class="two-omit  ellipsis--2">{{item.goodsName}}</view>
								<view class="goods-lable">
									{{msgDict.size}}:{{item.size.data[0].value}}
								</view>
								<view class="goods-price">¥ {{item.price}}</view>
							</view>
							<view class="itemBottom">
								<numbox :title="item.num" @clickLeft="btnCartDetClick(index)" @clickRight="btnCartAddClick(index)"></numbox>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</uni-popup>
<uni-popup ref="popNecessary" type="center">
	<view class="popNeedContent">
		<view class="titleG">
			<view class="popCheck">{{msgDict.addMust}}</view>
			<view class="popDelete">
				<uni-icons type="closeempty" color="#ccc" size="20" @click='btncolseNeedPopupClick'></uni-icons>
			</view>
		</view>
		<view class="needGoods">
			<scroll-view class="coupons" scroll-y="true" :style="'max-height: '+maxHight+'px;'">
				<view class="vailable" v-for="(item, index) in necessaryArr" :key="index">
					<view class="goodsItem">
						<view class="goodsInfo">
							<view class="img-box">
								<image mode="aspectFill" :src="item.picUrl" class="img" />
							</view>
							<view class="goodsDetailBox">
								<view class="goods-title">
									<view class="two-omit  ellipsis--2">{{item.title}}</view>
									<view class="needLab">{{msgDict.must}}</view>
									<view class="goods-price">¥ {{item.price}}</view>
							    </view>
								<view class="itemBottom">
									<view class="needNum" v-if="item.maxNum == 1">*1</view>
									<!-- 有效商品 -->
									<numbox v-else :title="item.needNum" @clickLeft="btnNeedDetClick(index,item.needNum)" @clickRight="btnNeedAddClick(index,item.needNum)"></numbox>
									<view class="goodSize">
										{{msgDict.size}}<view class="btnSize" @click="btnNeedSizeClick(index)">{{item.showSizeStr}}</view>
									</view>
								</view>
						    </view>
					    </view>
				    </view>
				</view>	
			</scroll-view>
	    </view>
		<view class="btnAddAllGroup">
			<view class="btnAddAll showBtnBackColor" @click="btnAddAllClick">{{msgDict.AddShop}}</view>
		</view>
	</view>	
</uni-popup>
<uni-popup ref="popSzieData" type="bottom">
	<view class="categoryContent">
		<view class="pickerBtn">
			<view class="popBnt cancer">{{msgDict.selectSize}}</view>
			<view class="popBnt" @click="btnSizeCancerSex">
				<uni-icons type="closeempty" color="#ccc" size="20"></uni-icons>
			</view>
		</view>
		 <view class="pickerView">
		   <picker-view class="picker" indicator-class="indicator" :value="CategoryStrat" @change="bindSexChange" @pickstart='bindSexStartChange' @pickend='bindSexEndChange'>
				<picker-view-column class="column">
				  <view v-for="(item, index) in CategoryData" :key="index">{{item.value}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="btnPopSizeGroup">
			<view class="btnPopSize showBtnBackColor" @click="btnSizeConfirmSex">
				{{msgDict.confirm}}
			</view>
		</view>
	</view>
</uni-popup>
</view>
</template>
<script>
	// import uniIcons from '@/components/uni-icons/uni-icons.vue'
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Tool from '@/util/util.js'
	import numbox from '@/components/numbox/numbox.vue'
	import {listSales,operateCar,listCar,clearCar,editCar,oneKey} from '../../api/index.js'
	export default {
		data() {
			return {
				
				userId:undefined,
				saleId: "",
				schoolId: "",
				type: '',//零售 2 预售 1
				upDict:{},
				commentList:[],
				orderNum:0,
			    necessaryArr:[],//必选的
				showPrice:'0.00',
			    getIndex:-1,
				selectItem:{selItem:'',sales:''},
				numberValue:1,
				skuList:{},
				goods:[],
				offset:[10,10],
				CategoryIndex:-1,//必选的index
				CategoryStrat:[0],//必选的开始位置
				CategoryData:[],//必选的数据源
				cartList:[],
				iOSOrAndro:false,
				allSelCheak:true,
				stuId:'',
				zIndex:10,
				shoppingCartAnimation: false, // 购物车动画
				cartBottomX:0,
				cartBottomY:0,
				showBall: false, // 小球是否显示
				animationY: '', // 动画Y
				animationX: '', // 动画X
				ballY: '', // 小球当前位置Y
				ballX: '', // 小球当前位置X
				isNeedReald:false,
				maxHight:0,
				redViewTop:40,
				redViewleft:40,
				canBtn:false,
				popCartIsOpen:false,//购物车是否打开了
				popCartDataIsChange:false,//购物车里面的数据是否改变 
				carId:'',
				sendType:'',//是否是大件到校  1:大件到校  2：送货到家
				msgDict:{}

				}
		},
		onLoad(option) {
			
			
			this.msgDict = getApp().globalData.$t('shopGood');
			this.stuId = getApp().globalData.stuId
			this.iOSOrAndro = getApp().globalData.iOSOrAndro
			this.userId = getApp().globalData.userId;
			
		    let sysInfo = uni.getSystemInfoSync();
		    // console.log('sys',sysInfo)
			this.maxHight = sysInfo.windowHeight - 240
			
			if (option.type) {
				this.type = option.type;
				if (option.type == '2') {
					let schoolName = decodeURIComponent(option.schoolName);
					uni.setNavigationBarTitle({
						title:schoolName
					})
					this.schoolId = option.schoolId
					
				} else{
					
					uni.setNavigationBarTitle({
						title:'预售'
					})
					this.schoolId = option.saleId
				}
				this.listStus();
				this.NewlistCar('new')	
			}
			
			Tool.getViewRect('.all_select_box').then(res => {
				
			 // console.log('res',res);
			 this.cartBottomX = res.right;
			 this.cartBottomY = res.bottom;
			 
			})
			
		},
		onShow() {
			
			if (this.isNeedReald) {
				this.isNeedReald =false;
				this.listStus();
				this.NewlistCar('reload');

			}
		},
		onPullDownRefresh() {
			
			this.listStus();
			this.NewlistCar('reload');
			
		},
		components:{
			numbox:numbox
		},
		methods: {
			//商品类别
			async listStus(){
				
				this.popCartDataIsChange = false;
				let dict = {};
				if (this.type == '2') {
					dict={type:this.type,schoolId:this.schoolId,studentId:this.stuId,userId:this.userId};
				} else{
					dict={type:'1',preSaleId:this.schoolId,studentId:this.stuId,userId:this.userId}
				}
				
				let {result} = await listSales(dict);
				const newList = [].concat(...(Array.from(result.list.reduce((total, cur, index) => {
				  total[index % 2].push(cur)
				  return total
				}, { 0: [], 1: [], length: 2 }))))
				// console.log(newList)
				let type = this.type;
				let endArr = newList.map((v,i)=>{
					
					v.size.popTitle = v.title;
					v.size.totalPrice = v.price;
					v.size.FaIndexId= v.goodsId
					v.size.FaSaleId= v.saleId
					v.size.FaIndex = i
					v.size.selItem = ''
					v.size.selIndex = -1
					v.size.selStock=0 //库存
					if (type == '1') {
					 v.size.izRequired = v.izRequired;//必选
					 v.size.maxNum = v.maxNum;
					}else{
					 v.size.izRequired = 0
					}
					
					v.showSizeDict = {} // 必选商品选择的样式
					v.showSizeStr = this.msgDict.choose // 必选商品选择的样式
					
					if (result.jiaobiaoData[v.goodsId]) {
						let AllNum = 0;
						let dictSel = result.jiaobiaoData[v.goodsId];
						v.size.data.forEach(v2=>{
							// debugger
							if (dictSel[v2.value]) {
							AllNum = AllNum + dictSel[v2.value];	
							v2.saledStock = dictSel[v2.value];
							}

						})
						v.showNum = AllNum

					}else{
						v.showNum = 0
					}
					
					v.size.selNum = 0 //购买数量
					
					
					return v
				})
				
			    this.goods = endArr;
		
			    uni.stopPullDownRefresh()
		  },
		  //加入购物车接口
		  async NewoperateCar(typeStr,itemNum){
		  
		    	try{
				let pushDict ={code:0,data:[]};
				pushDict.code = this.skuList.code;
				pushDict.data[0]=this.skuList.data[this.skuList.selIndex];

		  		let dict ={carType:this.type,saleId:this.skuList.FaSaleId,goodsId:this.skuList.FaIndexId,num:itemNum,size:pushDict,studentId:this.stuId,userId:this.userId};
				
				// console.log('dict',dict);
				
				let {result} = await operateCar(dict,false);
				
				
		  		this.skuList.selNum = itemNum;
				let goodItem = this.goods[this.skuList.FaIndex];
				if(typeStr == 'add'){
					uni.showToast({
						title:this.msgDict.Operation,
						icon:'none'
					})
					goodItem.showNum = goodItem.showNum + 1;
				}else{
					goodItem.showNum = goodItem.showNum - 1;
					uni.showToast({
						title:this.msgDict.Operation,
						
						icon:'none'
					})
				}
				this.NewlistCar('reload');
				
		  		// this.getCode();
		  		
		  	} catch(err) {
		  		console.log('我请求啦',err);
		  		uni.showToast({
		  			title:err.message,
		  			icon:'none'
		  		})
		  	}
		  },
		  //购物车列表
		  async NewlistCar(key){

		  	let {result} = await listCar({userId:this.userId,carType:this.type,studentId:this.stuId},true);
		  	
			if ( result.length >0) {
				
				let item = result[0];
				// console.log('item',item);
				
				
				if (this.type == '1') {
					
				this.sendType = item.sendType
					
				}else{
				//默认到家
				this.sendType = '2'
				}
				this.carId = item.carId;
				if (item.list == null || item.list.length == 0) {
				
					this.showPrice = '0.00';
					this.orderNum = '0';
				    this.cartList = [];
					return
				}
				this.showPrice = item.totalPrice;
				this.orderNum = item.list.length;
				
				this.cartList= item.list.map(v=>{
					
					v.isChecked =true;
					return v
				});
				
			} else{
				this.showPrice = '0.00';
				this.orderNum = 0;
				this.cartList = [];
				
			}

		  },
		  //删除购物车
		  async NewclearCar(){
		  
		    	try{
		  				
		  		let dict ={carType:this.type,studentId:this.stuId,userId:this.userId};
		  		let {result} = await clearCar(dict);
		  		uni.showToast({
		  			title:this.msgDict.Operation,
		  			icon:'none'
		  		})

				this.listStus()

				this.showPrice ='0.00';
				this.orderNum = 0;
				
				this.cartList = [];
				this.$refs.popup.close();
				
				
		  
		  		
		  	} catch(err) {
		  		console.log('我请求啦',err);
		  		uni.showToast({
		  			title:err.message,
		  			icon:'none'
		  		})
		  	}
		  },
		  //一键加入购物车
		  async requstOneKey(){
		  
		    	try{
		  			
				let endArr = [];
				this.necessaryArr.forEach(v=>{
					
					endArr.push({goodsId:v.goodsId,num:v.needNum,size:v.showSizeDict});
					
				})
				
						
		  		let dict ={carId:this.carId,list:endArr};
		  		let {result} = await oneKey(dict);
		  		uni.showToast({
		  			title:this.msgDict.Operation,
		  			icon:'none'
		  		})
				
				this.$refs.popNecessary.close();
				
				this.necessaryArr.forEach(v=>{
					
					this.goods[v.faIndex].showNum = v.needNum;
					
				})
				
				this.NewlistCar('reload');
				
		  
		  	} catch(err) {
		  		console.log('我请求啦',err);
		  		uni.showToast({
		  			title:err.message,
		  			icon:'none'
		  		})
		  	}
		  },
		  async newEditCar(sonItem,btnType,faindex){
		  	try{
		    
			this.popCartDataIsChange = true;
			
		  	if(btnType == 'add'){
		  		//加
		  		let  num = sonItem.num+1;
		  		let res = await editCar({carDetailId:sonItem.carDetailId,userId:this.userId,carType:this.type,studentId:this.stuId,num:num},false);
		  		sonItem.num = num
		  		
		  		if(sonItem.isChecked){
		  			
		  			let  showPrice = this.showPrice ;
					let endPrice = parseFloat(showPrice) + parseFloat(sonItem.price);
		  			
		  			this.showPrice = endPrice.toFixed(2)
		  		}
		  		
		  	}else{
		  		//减
		  		
		  		let  num = sonItem.num-1;
		  		let  res = await editCar({carDetailId:sonItem.carDetailId,userId:this.userId,carType:this.type,studentId:this.stuId,num:num},false);
		  		if(num <=0){
		  			this.cartList.splice(faindex,1);
					
					if(this.cartList.length == 0){
					
						this.$refs.popup.close();
					    this.orderNum = 0;
						
						this.showPrice = '0.00';
						
						
					}else{
						
						if(sonItem.isChecked){
							let  showPrice = this.showPrice ;
							let endPrice = parseFloat(showPrice) - parseFloat(sonItem.price)
							this.showPrice = endPrice.toFixed(2)
							
							
						}
						
						 this.orderNum = this.orderNum - 1;
						
					}
                  
		  		}else{
		  			sonItem.num = num
					
					if(sonItem.isChecked){
						let  showPrice = this.showPrice ;
						let endPrice = parseFloat(showPrice) - parseFloat(sonItem.price)
						this.showPrice = endPrice.toFixed(2)
						
					}
		  		}
		  		
		  	}

		  	} catch(err) {
		      	console.log('我请求啦',err);
		      	uni.showToast({
		      		title:err.message,
		      		icon:'none'
		      	})
		      }
		  
		  
		  },
		  //结算
          toPayOrder(){
			  
			   this.zIndex = 10;
			   if (this.type == '1') {
			   	
				   let needArr =[];
					
					this.goods.forEach((v,i)=>{
					   
					   if (v.izRequired == 1 && v.showNum == 0) {
						
						 v.needNum =1;
						 v.faIndex = i;
						 needArr.push(v);
						
					   }
				   })
			   
				   if (needArr.length > 0) {
			
				  this.necessaryArr = needArr;
				  this.$refs.popNecessary.open();
				  
				  return;
					
				   }
			   	
			   }
 
			  if (this.orderNum == 0) {
			  	
				uni.showToast({
					title:this.msgDict.needSelect,
					icon:'none'
				},1500)
				
				return
			  }
			 if (this.allSelCheak) {
					
					this.$refs.popup.close();

					uni.redirectTo({
						url:'../waitPay/waitPay?cartList='+encodeURIComponent(JSON.stringify(this.cartList))+'&cartType='+this.type+'&showPrice='+this.showPrice+'&orderNum='+this.orderNum+'&sendType='+this.sendType+'&schoolId='+this.schoolId
					})
				} else{
					
					let gitCartList = this.cartList.filter(v=>{
						
						
						return v.isChecked 
					})
					
					this.$refs.popup.close();
					
					// console.log('gitCartList',gitCartList);
					
					uni.redirectTo({
						url:'../waitPay/waitPay?cartList='+encodeURIComponent(JSON.stringify(gitCartList))+'&sendType='+this.sendType+'&cartType='+this.type+'&showPrice='+this.showPrice+'&orderNum='+this.orderNum+'&schoolId='+this.schoolId
					})

				}
				
			  
			
		  },
		  //去商品详情
		  gotoItemDetail(saleId,index,goodsId){
			  
					let needFAtherArr=[];//所有的必选商品
					let goodsItem= this.goods[index];
					let skuListDict = {code:goodsItem.size.code,data:goodsItem.size.data};
					skuListDict.selItem = ''
					skuListDict.selIndex = -1
					skuListDict.selNum = 0 //购买数量
					skuListDict.selStock=0 //库存
			     	let needFAtherDict = {};
					let isExistence='0';//是否是必选，0 不是，1 是
					
			        if (this.type == '1') {
						if (goodsItem.izRequired == 1) {
						   isExistence='1';
						}
						
			        	this.goods.forEach((v,i)=>{
			        						   
						   if (v.izRequired == 1) {
							   v.needNum =1;
							   v.faIndex = i;
							   
							   needFAtherDict[v.goodsId] = v;
							   
							   // needFAtherArr.push(v);
							   
						   }
			        	})
			        }

			  uni.navigateTo({
			  	url:'../goodDetail/goodDetail?type='+this.type +'&isExistence='+isExistence+'&saleId='+saleId+'&schoolId='+this.schoolId+'&needFAtherArr='+encodeURIComponent(JSON.stringify(needFAtherDict))+'&goodsId='+goodsId+'&skuListDict='+encodeURIComponent(JSON.stringify(skuListDict))
			  })
			  
		  },
		  //必选的一键添加
		  btnAddAllClick(){
			  
			 let result1 =  this.necessaryArr.some(v=>{
				  
				return  v.showSizeStr == this.msgDict.choose
				  
			  })
			  
			  if (result1) {
			  	
			   uni.showToast({
			   	title:this.msgDict.choose +' '+ this.msgDict.size,
			   	icon:'none'
			   },1500)
			  	
				return
			  }
			  
			  this.requstOneKey();

		  },
		  //必选取消按钮
		  btnSizeCancerSex(){
			  this.$refs.popSzieData.close();
		  },
		  //必选确认按钮
		  btnSizeConfirmSex(){
			  
			  if (this.canBtn) {
			    return;
			  	
			  }
			  let faindex = this.CategoryIndex;
			  let selIndex = this.CategoryStrat[0];
			  let item  = this.necessaryArr[faindex];
			 
			  item.showSizeDict.code = item.size.code;
			  item.showSizeDict.data = [this.CategoryData[selIndex]];
			  item.showSizeStr = this.CategoryData[selIndex].value;
			  
			  this.necessaryArr.splice(faindex,1,item);
			  
			  this.$refs.popSzieData.close();
			  
		  },
		  //取消必选的商品弹出窗
		  btncolseNeedPopupClick(){
			   this.$refs.popNecessary.close();
		  },
		  btnNeedDetClick(index,itemNum){
			  let item  =  this.necessaryArr[index];
			  
			  if (itemNum  <= 1) {
			  	
				uni.showToast({
					title:this.msgDict.needOne,
					icon:'none'
				})
				
				
			  } else{
				  
			  	item.needNum = itemNum - 1;
				this.necessaryArr.splice(index,1,item);
				
			  }
		  },
		  btnNeedAddClick(index,itemNum){
			  
			  let item  =  this.necessaryArr[index];
			  
			  if (itemNum < item.maxNum) {
				// debugger
			  	item.needNum = itemNum + 1;
				
				this.necessaryArr.splice(index,1,item)
					
			  } else{
			  	uni.showToast({
			  		title:this.msgDict.restricted+item.maxNum + this.msgDict.piece,
			  		icon:'none'
			  	})
			  }
			  
		  },
		  //必选弹出选择框
		  btnNeedSizeClick(index){
			  this.CategoryIndex = index;
			  this.CategoryStrat = [0];
			  this.CategoryData = this.necessaryArr[index].size.data;
			  
			  // this.$refs.popNecessary.close();
			  this.$refs.popSzieData.open();
			  
			  
		  },
		  bindSexChange(e){
		  	console.log('bindCategoryChange',e);
		  	this.CategoryStrat=e.detail.value;
		  	
		  },
		  bindSexStartChange(){
		  	console.log('321开始转动');
		  	this.canBtn = true
		  	
		  },
		  bindSexEndChange(){
		  	console.log('321结束转动');
		  	this.canBtn  =false
		  },
		  //弹出尺寸选择框
		  btnSpecifications(index){
			  let item  = this.goods[index];
			  this.skuList = item.size;
			  this.zIndex = 10;
			  this.$refs.popupAddCart.open();
			  
		  },
		  //规格弹窗加
		  btnNumboxAddClick(){
			  
			  
			  if (this.skuList.izRequired == 1) {
			  		
			  		if (this.skuList.maxNum <= this.skuList.selNum) {
			  							
			  				uni.showToast({
			  					title:this.msgDict.restricted+this.skuList.maxNum + this.msgDict.piece,
			  					icon:'none'
			  				})
			  				return
			  							
			  		}
			  
			  }
			  if (this.skuList.data.stock <= this.skuList.selNum) {
			  	
			  	uni.showToast({
			  		title:this.msgDict.restricted+this.skuList.data.stock + this.msgDict.piece,
			  		icon:'none'
			  	})
			  	return
				
			  }
			   // = this.skuList.selNum +1;
			  
			  this.NewoperateCar('add',this.skuList.selNum +1);
			  
		  },
		  //规格弹窗减
		  btnNumboxDetClick(){
			  
			//   if (this.skuList.selNum > 0) {
			//   	 this.skuList.selNum = this.skuList.selNum -1;
			
			  	
			//   }
			  this.NewoperateCar('det',this.skuList.selNum - 1);
			 
		  },
		  //切换尺寸
		  btnSizeClick(item,index){
			  
			  if (this.skuList.selIndex > -1) {
			     this.skuList.data[this.skuList.selIndex].saledStock = this.skuList.selNum;
			  	
			  }
			  this.skuList.selIndex = index;
			  this.skuList.selStock = item.stock;//限购
			  this.skuList.selNum =   item.saledStock;//购买数量
			  this.skuList.selItem = item.value;
			  this.$refs.popup.close();
			  
		  },
		  //关闭选择尺寸弹窗
		  btnPopCloseClick(){
			  
			 if (this.skuList.selNum) {
			     this.skuList.data[this.skuList.selIndex].saledStock = this.skuList.selNum;
			 }
			 this.$refs.popupAddCart.close();
			 
		  },
		  //加入购物车
		  btnAddCartClick(event){
			  
			  console.log('event',event);

			  if (this.skuList.selIndex == -1) {
			  	uni.showToast({
			  		title:this.msgDict.addCart,
			  		icon:'none'
			  	})
			  	return
			  }
			  
			  
			  this.skuList.selNum = 1;
			  // this.skuList.data[this.skuList.selIndex].saledStock = 1;
			  this.NewoperateCar('add',1);
			  
		  },
		  //底部购物车列表选择
		  btnChangeCheckbox(){
			  
			  let allSelCheak = !this.allSelCheak;
			  this.allSelCheak = allSelCheak;
			  
			  
			  
			  if (allSelCheak == false) {
			  	this.cartList.map(v=>{	  
					  v.isChecked = allSelCheak
					  return v
			  	})
			  	this.showPrice = '0.00';
				this.orderNum = 0
			  } else{
			  	let showPrice = 0;
				
			  	this.cartList.map(v=>{
			  		v.isChecked = allSelCheak
			  		showPrice = showPrice + v.num*v.price;
					
			  		
			  	})
			  	this.showPrice = showPrice.toFixed(2);
			   this.orderNum = this.cartList.length
			  }
			  
		  },
		  //底部购物车删除按钮
		  colsePopup(){
			  
			  uni.showModal({
				  
			  	content:this.msgDict.emptyCart,
			  	cancelText:this.msgDict.cancel,
			  	confirmText:this.msgDict.confirm,
			  	success: (res) => {
			  		if (res.confirm) {
			  			
			  		 this.NewclearCar();
			  			
			  		}
			  	}
			  })	
			  
		  },
		  //打来底部购物车列表
		  btnOpencartClick(){
			  
			  
			  if (this.cartList.length == 0 || this.popCartIsOpen == true) {
			  	
			  return
			  	
			  }
			  this.zIndex =120;
			  this.$refs.popup.open();
			  
		  },
		  //购物车加
		  btnCartAddClick(index){
			  let  sonItem  = this.cartList[index];
			  if (sonItem.size.data.stock <= sonItem.num) {
			  	
			  	uni.showToast({
			  		title:this.msgDict.restricted+sonItem.size.data.stock + this.msgDict.piece,
			  		icon:'none'
			  	})
			  	
			  } else{
			  	
			  	this.newEditCar(sonItem,'add',index)
			  	
			  }
		  },
		  //购物车减
		  btnCartDetClick(index){
			  let  sonItem  = this.cartList[index];
			  if (sonItem.num <= 0) {

			  	return
			  	
			  } else{
			  	
			  	this.newEditCar(sonItem,'det',index)
			  	
			  }
		  },
		  //购物车的选择框
		  btnselectedClick(index,checkType){
			  
			  if (checkType&& this.allSelCheak) {
				// this.cartList[index].isChecked = !checkType
			  	this.allSelCheak = !checkType
				let showPrice = 0;
				let ordNum = 0;
				 this.cartList.forEach((v,i)=>{
					
					if (index == i) {
						
				    v.isChecked = false
						
					}else{
						showPrice = showPrice + v.num*v.price;
						ordNum ++
					}
				})
				 this.orderNum = ordNum
				 this.showPrice = showPrice.toFixed(2);
				 
				
			  } else{
			  	this.cartList[index].isChecked = !checkType
				
				let result1 =  this.cartList.every(v=>{
					
					return v.isChecked == !checkType
				})
				
				if (result1) {
					
				this.allSelCheak = !checkType
					
				}
				
				let showPrice = 0;
				let ordNum = 0;
				this.cartList.forEach((v,i)=>{
					
					if (v.isChecked) {
						
					showPrice = showPrice + v.num*v.price;                                                   
					ordNum ++
					}
				})
				this.showPrice = showPrice.toFixed(2);
				this.orderNum = ordNum
			  }

		  },
		  btnCartChangeClick(e){
			  
			  this.popCartIsOpen = e.show;
			  
			  if (!e.show&&this.popCartDataIsChange) {
			  	
			    this.listStus();
			  	
			  }
		  },
			// 延迟执行
		  setDelayTime(sec) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {resolve()}, sec)
				});
		  },
		}
		
	}
</script>

<style lang="scss">
	.animatFlex{
	 display: flex;
	 
	 .ball {
	 	height: 30px;
	 	width: 30px;
	 	background: #FF1493;
	 	border-radius: 50%;
	 	position: fixed;
	  }
     }
	page{
		height: 100%;
		background-color: #f2f2f2;
	}
	.seleNum{
		position: absolute;
		top: -10rpx;
		right: 0;
		
		background-color: #F54353;
		color: #fff;
		height: 22rpx;
		font-size: 16rpx;
		padding: 0 8rpx;
		text-align: center;
		border-radius: 11rpx;
		line-height: 22rpx;
	}
	.redView{
		width: 40rpx;
		height: 40rpx;
		background-color: #FF0000;
		border-radius: 50%;
		position: absolute;

		
		
	}
	.popupContent {
		
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding-top: 20rpx;
		padding-bottom: 140upx;
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));  
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		
		.titleG {
			
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0rpx;
			margin-right:30rpx;
			border-bottom: thin solid #f2f2f2;
			margin-left: 20rpx;
			
			.uni-icons{
				padding-right: 10rpx;
			}
			
			.popCheck{
				display: flex;
				flex-direction: row;
				align-items: center;
				.classCheak{
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					padding-bottom: 5rpx;
				}
				
			}
			.popDelete{
				font-weight: 400;
				color: #B0B0B8;
				font-size: 24rpx;
				
				.uni-icons{
					position: relative;
					top: 3rpx;
				}
			}
		
		}
		
	
		.coupons {
			padding-right: 20rpx;
			width: 100%;
			box-sizing: border-box;
			// max-height: 540upx;
			// max-height: calc(100% - 580rpx);
			// max-height: calc(100% - 580rpx - constant(safe-area-inset-bottom));  
			// max-height: calc(100% - 580rpx - env(safe-area-inset-bottom));
			margin-top: 32upx;
			
			.goodsItem {
				// background-color: #007AFF;
				height: 160rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				
				
				.check {
					display: flex;
					align-items: center;
						justify-content: center;
						width: 80rpx;
						height: 100%;
				}
			
				.goodsInfo {
					flex:1 0 0%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
			
					// border-bottom: 1upx solid #ccc;
					// margin-top: 20upx;
					// margin-bottom: 20upx;
					.img-box {
						// display: flex;
						// flex-direction: column;
						width: 150upx;
						height: 150upx;
						background-color: #d8d8d8;
						// margin-left: 20upx;
						position: relative;
			            overflow: hidden;
						border-radius: 8rpx;
						border: thin solid #f2f2f2;
						.img {
							width: 100%;
							height: 100%;
						}
			
						.backView {
							position: absolute;
							bottom: 0upx;
								right: 0;
							width: 200upx;
							height:34upx;
							background: rgba(0, 0, 0, 0.5);
							font-size: 16upx;
							font-weight: 300;
							color: #FFFFFF;
							text-align:center;
						    line-height: 30rpx;
						}
					}
			
					.text-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						overflow: hidden;
						// background-color: #FAECD8;
						margin-left: 20upx;
						width: 470rpx;
						height: 100%;
						// 购物车列表
			
						.goods-title {
							    display: flex;
								justify-content: space-between;
								flex-direction: column;
							// align-items: center;
								
								.two-omit{
									font-size: 32upx;
									color: #333333;
									// padding: 0upx 20upx 10upx 0;
									font-weight: 400;
									
								}
								.goods-lable {
									
									font-size: 22upx;
									color: #666;
									font-weight: 400;
									
								}
								.goods-price{
									font-size: 28upx;
									color: #F54353;
									font-weight: 400;
									white-space: nowrap;
								}
						}
			
						.itemBottom {
							display: flex;
							height: 95%;
							flex-direction: column-reverse;
							
						}
					}
				}
			
			}
		
		}
		
	}
	
	//必须商品弹出窗
	.popNeedContent{
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		width: 640rpx;
		
		.titleG{
			background-color: #fff;
			border-bottom: 1px solid #ccc;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			.popCheck{
				font-size: 32rpx;
				color: #333;
			}
		}
		.needGoods{
			padding: 30rpx;
			.coupons {
				width: 100%;
				box-sizing: border-box;
				max-height: 540upx;
				 .goodsItem {
				 	// background-color: #007AFF;
				 	height: 160rpx;
				 	display: flex;
				 	flex-direction: row;
				 	margin-bottom: 20rpx;
				 	
				 	
				 	.check {
				 		display: flex;
				 		align-items: center;
				 			justify-content: center;
				 			width: 80rpx;
				 			height: 100%;
				 	}
				 
				 	.goodsInfo {
				 		flex:1 0 0%;
				 		display: flex;
				 		flex-direction: row;
				 		align-items: center;
				 		justify-content: space-between;
				 
				 		// border-bottom: 1upx solid #ccc;
				 		// margin-top: 20upx;
				 		// margin-bottom: 20upx;
				 		.img-box {
				 			// display: flex;
				 			// flex-direction: column;
				 			width: 150upx;
				 			height: 150upx;
				 			background-color: #d8d8d8;
				 			// margin-left: 20upx;
				 			position: relative;
				             overflow: hidden;
				 			border-radius: 8rpx;
				 			border: thin solid #f2f2f2;
				 			.img {
				 				width: 100%;
				 				height: 100%;
				 			}
				 		}
				 
				 		.goodsDetailBox {
				 			display: flex;
				 			// flex-direction: column;
				 			justify-content: space-between;
				 			overflow: hidden;
				 			// background-color: #FAECD8;
				 			margin-left: 20upx;
				 			width: 400rpx;
				 			height: 100%;
				 
				 			.goods-title {
				 				display: flex;
				 				justify-content: space-between;
								flex-direction: column;
				 				// align-items: center;
				 					
				 					.two-omit{
				 						font-size: 32upx;
				 						color: #333333;
				 						// padding: 0upx 20upx 10upx 0;
				 						font-weight: bold;
				 						
				 					}
										
				 					.needLab{
										
										border-radius: 10rpx;
										background-color: #FFF1DF;
										color: #FDAC3D;
										font-size: 22rpx;
										font-weight: 500;
										text-align: center;
										width: 120rpx;
										padding: 0 3rpx;
										
									}
				 					.goods-price{
				 						font-size: 28upx;
				 						color: #e54d42;
				 						font-weight: 500;
				 						white-space: nowrap;
				 					}
				 			}
				 
				 			.itemBottom {
				 				// margin-top: 20upx;
				 				display: flex;
				 				align-items: flex-end;
				 				justify-content: space-between;
								flex-direction: column;
								margin-left: 30rpx;
								
	
				 				// height: 60rpx;
				 
				 				.goods-lable {
				 					font-size: 28upx;
				 					color: #ccc;
				 					font-weight: 400;	
				 				}
								.needNum{
									font-size: 24upx;
									color: #ccc;
									font-weight: 400;	
								}
								.goodSize{
									display: flex;
									align-items: center;
									white-space:nowrap;
									font-size: 26rpx;
									color: #666;
									.btnSize{
										border-radius: 10rpx;
										background-color: #f2f2f2;
										border: thin solid #ccc;
										// padding: 15rpx 10rpx;
										text-align: center;
										width: 90rpx;
										color: #808080;
										font-size:24rpx;
										margin-left: 10rpx;	
										height: 45rpx;
										line-height: 45rpx;
										
									}
								}
		
				 			}
				 		
				 		}
				 	}
				 
				 }
				 		
				}
				
		}
		.btnAddAllGroup{
			border-top:thin solid #f2f2f2;
			padding: 30rpx 80rpx 10rpx;
			
			.btnAddAll{
			   color: #fff;
			   // background-color: #FF1493;
			   height: 84rpx;
			   line-height: 84rpx;
			   border-radius: 41rpx;
			   font-size: 32rpx;
			   text-align: center;
						   
			}
		}
		
		
	}
	
	
	//加入购物车弹出
	.popupAddCartCon{
		// margin:0 40rpx;
		background-color: #FFFFFF;
		padding:  30rpx 0 40rpx;
		border-radius: 20rpx;
		width: 640rpx;
		
		.titleG{
			display: flex;
			margin: 0 20rpx;
			// width:;
			justify-content: space-between;
			align-items: center;
			
			.title{
				display: flex;
				flex-direction: row;
				
				font-size: 36rpx;
				color: #333;
				
				.labIzRequired {
					color: #FDAC3D;
					background-color: #FFF1DF;
					font-size: 22rpx;
					text-align: center;
					// width: 103rpx;
					padding: 0 3rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 4rpx;
					margin-top: 10rpx;
					margin-right: 30rpx;
				}
			}
			
		}
		.needLab{
			
			border-radius: 8rpx;
		    background-color: #EAF2FE;
			// padding: 5rpx 10rpx;
			color: #548CE7;
			font-size: 22rpx;
			font-weight: 500;
			text-align: center;
			min-width: 82rpx;
			padding: 0rpx 10rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;
			display: initial;
			// margin-right: 10rpx;
		}
		
	    .selefctList {
		  padding-right: 20upx;
		  margin-top: 20rpx;
		  
		  
		  .selectTitle {
			
			font-size: 26upx;
			font-weight: 400;
			color: #888;
			margin-left: 20rpx;
		
		}
		
		.selectTitle text {
		
			color: #AFADAD;
		}
		.selectItems {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			
			.keyItem {
				text-align: center;
				margin-top: 30upx;
				margin-left: 24upx;
				font-size: 22upx;
				height: 45upx;
				width: 90upx;
				border-radius: 10upx;
				color: #333;
				line-height: 45upx;
				border: thin solid #CECECE;
			}
			
			
			.keyItemActive {
				
				color:#0005C9;
				background-color: rgba(0, 5, 201, 0.1);;
				border-color:#2967F2;
				
			}
			.keyItemZero{
				background-color: #ccc;
			}
			
			
		}
		
	}
	.selectSku{
		// background-color: #DCDFE6;
		// margin-top:40rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
		color: #548CE7;
		font-weight: 400;
	}
	
	.btnAdd{
		background:linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);;
		color: #fff;
		font-size: 28rpx;
		height: 74rpx;
		border-radius: 37rpx;
		width: 202rpx;
		text-align: center;
		line-height: 74rpx;
		
	}
	.buy-num {
		margin-top: 54upx;
		margin-left: 20upx;
		margin-right: 20upx;
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.buy-num-title {
	
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color:#F54353;
		height: 70rpx;
		line-height: 70rpx;
		
		display: flex;
		flex-direction: row;
		
		 text{
			 
			 font-size:48upx;
		 }
		 .selSku{
			 color: #333;
			 font-size: 28rpx;
			 margin-left: 10rpx;
		 }
	}

}

.container {
	background-color: #f6f6f6;
	position: relative;
 }
 .goodItem {
	padding: 0 20upx;
	// display: flex;
	// flex-wrap: wrap;
	// justify-content: space-between;
	
	column-count: 2;

	padding-bottom: 130rpx;
	padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));  
	padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	
  }
.goodItem .items{
	width: 345upx;
	margin-bottom: 20upx;
	border-radius: 10rpx;
	overflow: hidden;
	 break-inside: avoid;
	
}
.goodItem .goodImage {
	width: 100%;
	height: 345upx;
	position: relative;
	
}

.goodItem .goodImage image{
	width: 100%;
	height: 100%;
}
.goodItem .goodImage .proNone{
	position: absolute;
	width: 345rpx;
	height: 345rpx;
	top: 0;
	right: 0;
}
.styleList{
	display: flex; 
	padding: 23upx 0 22upx;
}
.contentGroud{
	padding: 0 16upx;
	background-color:#fff;
	padding-top: 23upx;
	padding-bottom: 20rpx;
	
	.totle{
		font-size: 26upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 400;
		color: #333;
		text-align: left;
		display: flex;
		align-items: center;
		
		.shopType{
			background-color: #FFF1DF;
			color:#FDAC3D;
			font-size: 22rpx;
			font-weight: 400;
			padding: 1rpx 10rpx;
			margin-right: 10rpx;
			border-radius: 4rpx;
		}
	}
}
.shopLimit{
	background-color: #EAF2FE;
	color: #548CE7;
	font-size: 22rpx;
	height: 30rpx;
	// width: 88rpx;
	text-align: center;
	line-height: 30rpx;
	font-weight: 400;
	// margin-top: 5rpx;
	border-radius: 4rpx;
	margin-left: 10rpx;
}
.goodItem .contentGroud .justify{
	display: flex;
	justify-content: space-between;
	margin-top: 18upx;
	
}
.justify .moneyG{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
.itemMoney{
	
	font-size: 28upx;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	font-weight: 400;
	color: #F54353;
}
.itemMoney text{
	font-size: 28rpx;
}
.itemSales{
	
	font-size: 20upx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 400;
	color: #333;
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	border-radius: 23rpx;
	border: thin solid #CECECE;
	text-align: center;
	
	position: relative;
	
}



.jiesuan-box {
	display: flex;
	justify-content: space-between;
	width: 750rpx;
	height: 94upx;
	// border-radius: 50rpx;
	
	position: fixed;
	z-index: 120;
	bottom: 0rpx;
	bottom: calc(0rpx + constant(safe-area-inset-bottom));  
	bottom: calc(0rpx + env(safe-area-inset-bottom));
	left: 0rpx;
	border-top: thin solid #eee;
	background-color: #fff;

	.left-price {
		display: flex;
		width: 510upx;
		justify-content: flex-start;
		padding: 0 30upx 0 10rpx;
		font-size: 28upx;
		box-sizing: border-box;
		align-items: center;

		.all_select_box {
			width: 80rpx;
			height: 80rpx;
			background: #FFB34D;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			position: relative;
		}

		.total {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #F54353;
			font-size: 22rpx;
			font-weight: 400;
			text{
				// font-size: 32rpx;
				// color: #F54353;
				margin-left: 10rpx;
			}

		}
	}

	.to-pay-btn {
		width: 202rpx;
		height: 74rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 28rpx;
		color: #ffffff;
		background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
		border-radius: 37rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}
}
.categoryContent{
	width: 750upx;
	background-color: #fff;
	// padding-bottom: 40rpx;
	.pickerBtn{
		height: 101rpx;
		line-height: 101rpx;
		background-color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: thin solid #ccc;
		padding: 0 20rpx;
		
		.popBnt{
			// width: 80upx;
			text-align: center;
		}
		.cancer {
			color: #888;
		}
		.confirm{
			color: #4CD964;
		}
	}
	.picker {
	  background-color: #fff;
	  width: 100%;
	  height: 370rpx;
	  }
	  .column {
		font-size: 40rpx;
		color: #000;
		text-align: center;
		line-height: 80rpx;
	  }
	  .indicator {
		  height: 80rpx;
		  border-top: thin solid #f2f2f2;
		  border-bottom:thin solid #f2f2f2;
	  }
	  .btnPopSizeGroup{
		  
		  bottom: 0rpx;
		  bottom: calc(0rpx + constant(safe-area-inset-bottom));  
		  bottom: calc(0rpx + env(safe-area-inset-bottom));
		  
		  .btnPopSize{
			  
			  color: #fff;
			  // background-color: #FF1493;
			  height: 100rpx;
			  line-height:100rpx;
			  // border-radius: 10rpx;
			  font-size: 32rpx;
			  text-align: center;
			  
		  }
		  
	  }
	
}
		
		
		
	   	
/* 购物车动画 */
.shoppingCartAnimations {
	animation: shoppingCartAnimation 1s;
}
@keyframes shoppingCartAnimation {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
 
    20% {
        transform: scale3d(1.1,1.1,1.1)
    }
 
    40% {
        transform: scale3d(.9,.9,.9)
    }
 
    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }
 
    80% {
        transform: scale3d(.97,.97,.97)
    }
 
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}
</style>
